import React, { useState, useEffect } from "react";
import './My_list.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { Input, Radio } from 'antd-mobile'
function Address_Add() {
    const [name, setName] = useState('')
    const [phone, setPhone] = useState('')
    const [addres, setAddres] = useState('')
    const navigate = useNavigate();
    const [xiaddress, setXiaddress] = useState('')
    const [adId, setAdId] = useState('')
    const [status, setStatus] = useState(false)
    const [addressList, setAddressList] = useState([])
    const [addressCate, setAddressCate] = useState([])
    const [text, setText] = useState('') // 新增state用于存储文本内容
    useEffect(() => {
        getAddressList()
        getAddressCate()
    }, [])
    const getAddressList = async () => {
        const data = await axios.get('http://localhost:3000/address_List')
        console.log(data);
        setAddressList(data.data.data)
    }
    const getAddressCate = async () => {
        const data = await axios.get('http://localhost:3000/address_Cate')
        console.log(data);
        setAddressCate(data.data.data)
    }
    const SaveAdd = async () => {
        let data = await axios.post('http://localhost:3000/address_Add', {
            adId: adId,
            name: name,
            phone: phone,
            addres: addres,
            xiaddress: xiaddress,
            status: status
        })
        if (data.data.code == 200) {
            alert('添加成功')
            navigate('/address')
            getAddressList()
        }
    }
    // 新增智能识别处理函数
    const handleParse = () => {
        // 清理文本内容
        const cleanedText = text.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim()
        // 匹配格式：姓名，电话，地址
        const pattern = /^([^,，]+?)[,，]\s*(\d{11}|[\d*]+)[,，]\s*(.+)$/i
        const match = cleanedText.match(pattern)

        if (!match) {
            alert('格式不正确，请按照示例格式填写')
            return
        }

        const namePart = match[1].trim()
        let phonePart = match[2].replace(/\D/g, '') // 移除非数字字符
        const addressPart = match[3].trim()

        // 验证姓名
        if (!namePart) {
            alert('请输入收货人姓名')
            return
        }

        // 验证电话
        if (phonePart.length !== 11) {
            alert('手机号应为11位数字')
            return
        }

        // 处理地址信息
        const addressSplit = addressPart.split(/\s+/)
        let area = ''
        let detail = ''

        // 简单分割逻辑：前三个部分作为省市区
        if (addressSplit.length >= 3) {
            area = addressSplit.slice(0, 3).join(' ')
            detail = addressSplit.slice(3).join(' ')
        } else {
            area = addressSplit[0] || ''
            detail = addressSplit.slice(1).join(' ') || ''
        }

        // 更新表单状态
        setName(namePart)
        setPhone(phonePart)
        setAddres(area)
        setXiaddress(detail)
    }

    return (
        <div className="address_Add">
            <div className="dingdan_detail_top">
                <div className="dingdan_detail_left">
                    <p >9:41</p>
                </div>
                <div className="dingdan_detail_right">
                    <h3 className='dingdan_detail_right_h3'>
                        <svg t="1739181732005" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4224" width="20" height="20"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="4225" fill="#2c2c2c"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="4226" fill="#2c2c2c"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="4227" fill="#2c2c2c"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="4228" fill="#2c2c2c"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="4229" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h31'>
                        <svg t="1739181875778" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8311" width="20" height="20"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="8312" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h32'>
                        <svg t="1739182052804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="20" height="20"><path d="M984.2 434.8c-5-2.9-8.2-8.2-8.2-13.9v-99.3c0-53.6-43.9-97.5-97.5-97.5h-781C43.9 224 0 267.9 0 321.5v380.9C0 756.1 43.9 800 97.5 800h780.9c53.6 0 97.5-43.9 97.5-97.5v-99.3c0-5.8 3.2-11 8.2-13.9 23.8-13.9 39.8-39.7 39.8-69.2v-16c0.1-29.6-15.9-55.5-39.7-69.3zM912 702.5c0 12-6.2 19.9-9.9 23.6-3.7 3.7-11.7 9.9-23.6 9.9h-781c-11.9 0-19.9-6.2-23.6-9.9-3.7-3.7-9.9-11.7-9.9-23.6v-381c0-11.9 6.2-19.9 9.9-23.6 3.7-3.7 11.7-9.9 23.6-9.9h780.9c11.9 0 19.9 6.2 23.6 9.9 3.7 3.7 9.9 11.7 9.9 23.6v381z" p-id="9430" fill="#2c2c2c"></path><path d="M736 344v336c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V344c0-8.8 7.2-16 16-16h608c8.8 0 16 7.2 16 16z" p-id="9431" fill="#2c2c2c"></path></svg>
                    </h3>
                </div>
            </div>
            <div className="dingdan_detail_wodedingdan">
                <div className="dingdan_detail_wodedingdan_left" onClick={() => {
                    navigate('/ding_detail')
                }}>
                    <p>
                        <svg t="1739244511321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4181" width="25" height="25"><path d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536" p-id="4182"></path></svg>
                    </p>
                </div>
                <div className="dingdan_detail_wodedingdan_center">
                    <h3>新增收货地址</h3>
                </div>

            </div>
            <div className="address_Add_neirong">
                <p className="address_Add_neirong_p1">
                    <span >收货人名字

                    </span>
                    <span style={{
                        marginTop: '2px',
                    }}>
                        <Input value={name} onChange={(e) => {
                            setName(e)
                        }} placeholder='输入收货人名字' clearable />
                    </span>
                </p>
                <p className="address_Add_neirong_p1">
                    <span tyle={{
                        marginTop: '2px',
                    }}> 联系手机

                    </span>
                    <span style={{
                        marginTop: '2px',
                    }}>
                        <Input value={phone} onChange={(e) => {
                            setPhone(e)
                        }} placeholder='输入联系手机号' clearable />
                    </span>
                </p>
                <p className="address_Add_neirong_p1">
                    <span tyle={{
                        marginTop: '2px',
                    }}>所在地区

                    </span>
                    <span>
                        <Input value={addres} onChange={(e) => {
                            setAddres(e)
                        }} placeholder='选择所在地区' clearable />
                    </span>
                </p>
                <p className="address_Add_neirong_p1">
                    <span>详细地址

                    </span>
                    <span>
                        <Input value={xiaddress} onChange={(e) => {
                            setXiaddress(e)
                        }} placeholder='输入详细的地址与门牌号' clearable />
                    </span>
                </p>
                <p className="address_Add_neirong_p1">
                    <span>设为默认

                    </span>
                    <span className="moren">
                        <Radio value={status} onChange={(e) => {
                            setStatus(e)
                        }}></Radio>
                    </span>
                </p>
            </div>
            <div className="address_Add_AI">
                <h3 >智能识别</h3>
                <p className="address_Add_AI_p1">
                    <textarea
                        value={text}
                        onChange={(e) => setText(e.target.value)}
                        style={{ border: 'none' }}
                        placeholder="粘贴文本到此处，将自动识别收货信息，例如：云云，138********，广东省广州市南沙 XXXX路XX号"
                        cols="50"
                        rows="4"
                    />
                </p>
                <p className="address_Add_AI_p2" onClick={handleParse}>
                    识别
                    {/* 张三，13812345678，广东省 广州市 南沙区 XXX路XX号 */}
                </p>
            </div>
            <div className="address_Add_Cate">
                <h3>地址标签</h3>
                <div className="address_Add_Cate_item">
                    {
                        addressCate.map((item, index) => {
                            return (
                                <ul key={index}>
                                    <li className="address_Add_Cate_item_li"
                                        style={{ color: item._id === adId ? 'red' : 'inherit' }}
                                        onClick={() => {
                                            setAdId(item._id)
                                            getAddressList()
                                        }}

                                    >
                                        {item.name}
                                    </li>
                                </ul>
                            )
                        })
                    }
                </div>

            </div>
            <div className="address_Add_Save">
                <p className="address_Add_Save_p" onClick={SaveAdd}>
                    保存
                </p>
            </div>
        </div>
    )
}

export default Address_Add;